<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="mvvm">
        <title>Custom | Kendo UI MVVM</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to create custom bindings in Kendo UI MVVM.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("framework/mvvm/bindings/custom.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//framework/mvvm/bindings/custom.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="custom-binding"><a href="#custom-binding">Custom Binding</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/mvvm/index">Kendo UI MVVM component</a> allows for the <a href="http://demos.telerik.com/kendo-ui/mvvm/custom">custom bindings</a>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The custom binding should be registered before the <code>kendo.bind</code> method is called.</p>
</blockquote>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<p>A custom binding is registered by extending the <a href="/api/javascript/data/binder"><code>kendo.data.Binder</code></a> object.</p>

<h3 id="one-way-custom-bindings"><a href="#one-way-custom-bindings">One-Way Custom Bindings</a></h3>

<p>The example below demonstrates how to register a one-way binding. As a result, the HTML element is updated when the view-model changes.  </p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" data-bind="checked: slideValue" /&gt;toggle slideValue&lt;/label&gt;&lt;/p&gt;

    &lt;div id="target" style="width:200px;height:200px;background:#fc9;" data-bind="slide: slideValue"&gt;
        Orange Square.
    &lt;/div&gt;

    &lt;script&gt;
        kendo.data.binders.slide = kendo.data.Binder.extend({
            refresh: function() {
                var value = this.bindings["slide"].get();

                if (value) {
                    $(this.element).slideDown();
                } else {
                    $(this.element).slideUp();
                }
            }
        });

        var viewModel = kendo.observable({
            slideValue: true
        });

        kendo.bind(document.body, viewModel);
    &lt;/script&gt;
</code></pre>

<h3 id="two-way-custom-bindings"><a href="#two-way-custom-bindings">Two-Way Custom Bindings</a></h3>

<p>The example below demonstrates how to register a two-way binding. As a result, both the HTML element and the View-Model are updated.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;input data-bind="numericValue: number" /&gt;
    Input value: &lt;span data-bind="text: number" /&gt;

    &lt;script&gt;
        kendo.data.binders.numericValue = kendo.data.Binder.extend({
            init: function(element, bindings, options) {
                //call the base constructor
                kendo.data.Binder.fn.init.call(this, element, bindings, options);

                var that = this;
                //listen for the change event of the element
                $(that.element).on("change", function() {
                    that.change(); //call the change function
                });
            },
            refresh: function() {
                var that = this,
                    value = that.bindings["numericValue"].get(); //get the value from the View-Model

                $(that.element).val(value); //update the HTML input element
            },
            change: function() {
                var value = this.element.value;
                //in this example the View-Model will be updated only if the value of the input is a number
                if (!isNaN(value)) {
                    this.bindings["numericValue"].set(value); //update the View-Model
                }
            }
        });

        //View-Model source
        var viewModel = kendo.observable({
            number: 10
        });

        kendo.bind(document.body, viewModel);
    &lt;/script&gt;
</code></pre>

<h3 id="custom-widget-binding"><a href="#custom-widget-binding">Custom Widget Binding</a></h3>

<p>The example below demonstrates how to bind the max value of a Kendo UI NumericTextBox widget. As a result, the widget is updated when the View-Model changes.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" /&gt;​

    &lt;script&gt;
    kendo.data.binders.widget.max = kendo.data.Binder.extend({
        init: function(widget, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
        },
        refresh: function() {
            var that = this,
            value = that.bindings["max"].get(); //get the value from the View-Model
            $(that.element).data("kendoNumericTextBox").max(value); //update the widget
        }
    });

    //View-Model source
    var viewModel = kendo.observable({
        value: 5,
        max: 10
    });

    kendo.bind(document.body, viewModel);    
    &lt;/script&gt;
</code></pre>

<h4>Custom Binding in TypeScript</h4>

<p>The following example demonstrates how to bind the max value of a Kendo UI NumericTextBox by using the custom widget biding approach. As a result, the widget is updated when the View-Model changes.</p>

<h6>Example</h6>

<pre><code>    &lt;input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" /&gt;​

    /// &lt;reference path="jquery.d.ts" /&gt;
    /// &lt;reference path="kendo.all.d.ts" /&gt;

    module kendo.data.binders.widget {

        export class max extends kendo.data.Binder {
            init(widget, bindings, options) {
                //call the base constructor
                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
            }

            refresh() {
                var that = this,
                value = that.bindings["max"].get(); //get the value from the View-Model
                that.element.max(value);
            }
        }
    }

    class NumericOptions extends kendo.data.ObservableObject {
        value = 5;
        max = 10;

        constructor() {
            super();

            super.init(this);
        }
    }

    class ViewModel extends kendo.data.ObservableObject {
        person = new NumericOptions();

        constructor() {
            super();

            super.init(this);
        }
    }

    $(function () {
        var viewModel = new NumericOptions();

        kendo.bind(document.body, viewModel);

    });
</code></pre>

<h4>Custom Widget Binding In TypeScript</h4>

<p>The example demonstrates how to use custom widget binding in TypeScript. It shows how to bind the max value of a Kendo UI NumericTextBox widget. As a result, the widget is updated when the View-Model changes.</p>

<h6>Example</h6>

<p><input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max">​</p>

<p>/// <reference path="jquery.d.ts"></reference>
/// <reference path="kendo.all.d.ts"></reference></p>

<p>module kendo.data.binders.widget {</p>

<pre><code>export class max extends kendo.data.Binder {
    init(widget, bindings, options) {
        //call the base constructor
        kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
    }

    refresh() {
        var that = this,
        value = that.bindings["max"].get(); //get the value from the View-Model
        that.element.max(value);
    }
}
</code></pre>

<p>}</p>

<p>class NumericOptions extends kendo.data.ObservableObject {
    value = 5;
    max = 10;</p>

<pre><code>constructor() {
    super();

    super.init(this);
}
</code></pre>

<p>}</p>

<p>class ViewModel extends kendo.data.ObservableObject {
    person = new NumericOptions();</p>

<pre><code>constructor() {
    super();

    super.init(this);
}
</code></pre>

<p>}</p>

<p>$(function () {
    var viewModel = new NumericOptions();</p>

<pre><code>kendo.bind(document.body, viewModel);
</code></pre>

<p>});</p>

<h4>Breakdown of Code Elements</h4>

<ul>
<li>
<code>init</code>—This is the binding constructor. If this function is overridden, the base <code>Binder</code> constructor should be called explicitly.</li>
<li>
<code>refresh</code>—This is the handler responsible for updating the HTML element. It is executed each time when the value of the bound MVVM field changes. The bound DOM element and the attached MVVM bindings could be retrieved through the context of the function.</li>
</ul>

<h6>Example</h6>

<pre><code>refresh: function() {
    this.bindings //contains all bindings for the current element
    this.element //reference the to the DOM element
}
</code></pre>

<ul>
<li>
<code>change</code>—This is the handler responsible for updating the View-Model. It listens for the change event of the bound HTML input element. The View-Model is updated through the <code>set(value)</code> method of the binding.</li>
</ul>

<h6>Example</h6>

<pre><code>change: function() {
    this.bindings //contains all bindings for the current element
    this.element //reference to the DOM element
}
</code></pre>

<ul>
<li>Binding methods—Bindings have two important methods: <code>get()</code> and <code>set(value)</code>.</li>
</ul>

<p>The <code>get</code> method returns the value from the View-Model.</p>

<h6>Example</h6>

<pre><code>this.bindings["slide"].get() //outputs true
</code></pre>

<p>The <code>set</code> method accepts one parameter and sets it as a new value of the bound field from the View-Model.</p>

<h6>Example</h6>

<pre><code>this.bindings["slide"].set(false) //sets the slideValue to false
</code></pre>

<h2 id="basic-usage"><a href="#basic-usage">Basic Usage</a></h2>

<p>Custom bindings are set via <code>data-bind</code> attribute, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>&lt;div id="target" data-bind="slide: slideValue"&gt;
    One Big Orange Square.
&lt;/div&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI MVVM component and bindings:</p>

<ul>
<li><a href="/framework/mvvm/overview">MVVM Overview</a></li>
<li><a href="/framework/mvvm/bindings/attr">Overview of the Attribute Binding</a></li>
<li><a href="/framework/mvvm/bindings/checked">Overview of the Checked Binding</a></li>
<li><a href="/framework/mvvm/bindings/click">Overview of the Click Binding</a></li>
<li><a href="/framework/mvvm/bindings/css">Overview of the CSS Binding</a></li>
<li><a href="/framework/mvvm/bindings/disabled">Overview of the Disabled Binding</a></li>
<li><a href="/framework/mvvm/bindings/enabled">Overview of the Enabled Binding</a></li>
<li><a href="/framework/mvvm/bindings/events">Overview of the Events Binding</a></li>
<li><a href="/framework/mvvm/bindings/html">Overview of the HTML Binding</a></li>
<li><a href="/framework/mvvm/bindings/invisible">Overview of the Invisible Binding</a></li>
<li><a href="/framework/mvvm/bindings/source">Overview of the Source Binding</a></li>
<li><a href="/framework/mvvm/bindings/style">Overview of the Style Binding</a></li>
<li><a href="/framework/mvvm/bindings/text">Overview of the Text Binding</a></li>
<li><a href="/framework/mvvm/bindings/value">Overview of the Value Binding</a></li>
<li><a href="/framework/mvvm/bindings/visible">Overview of the Visible Binding</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

